<script setup>
import axios from "@/axios/index.js";
import {reactive, ref} from "vue";
import SubjectAdd from './SubjectAdd.vue'
import SubjectUpdate from "@/views/subject/subject/SubjectUpdate.vue";

let tableData = ref([])
let pagination = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 5
})
let multipleSelection = ref([])
//学科添加控制
let addDialog = ref(false)
//修改框显示
let updateDialog = ref(false)
//状态值
let status=ref(0)
//员工姓名
let staffName=ref('')

let rowData = ref({
  id:'',
  subjectName: '',
  subjectDescription:'',
  creatorId:'',
  updateId:'',
  status:''
})

const handleSelectionChange = (value) => {
  multipleSelection = value
}

// 显示修改界面
function showUpdate(data) {
  rowData.value.id = data.id
  rowData.value.subjectName = data.subjectName
  rowData.value.subjectDescription = data.subjectDescription
  rowData.value.updateId = data.updateId
  updateDialog.value = true
}


// 改变状态
function updateStatus(id, status) {
  if (!id) {
    alert('ID不能为空');
    return;
  }
  // 确保状态值为1或0
  status = status ? 1 : 0;

  axios.put("/api/v1/admin/subject/updateStatus", {
    id,
    status
  },{ headers: { 'content-type': 'application/json' } }).then(response => {
    console.log('更新成功', response);
    initData(); // 更新状态后重新加载表格数据
  }).catch(error => {
    console.error('更新失败', error);
  });
}



function initData() {

  axios.get("/api/v1/admin/subject/list", {params: {currentPage: pagination.currentPage,pageSize: pagination.pageSize}}).then(resp => {
    if (resp.data.code === 200) {
      for (let i = 0; i < resp.data.data.data.length; i++) {
        if (resp.data.data.data[i].status == 1){
          resp.data.data.data[i].status = true
        }else {
          resp.data.data.data[i].status = false
        }
      }

      tableData.value = resp.data.data.data;
      pagination.total = resp.data.data.total;
    }
  })

}

/**
 * 改变当前页时触发事件
 */
function handleCurrentChange(curPage) {
  pagination.currentPage = curPage
  initData()
}

/**
 * 改变每页数据量大小时触发
 */
function handleSizeChange(curSize) {
  pagination.pageSize = curSize
  initData()
}

initData();

</script>
<template>

  <el-form :inline="true" >
    <el-form-item>
      <el-button type="primary" icon="Plus" @click="addDialog = true" >添加学科</el-button>
    </el-form-item>
  </el-form>

  <div class="table">
    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%;margin-left: auto;text-align: center"
        @selection-change="handleSelectionChange"
    >
      <el-table-column prop="id" label="ID" width="60"/>
      <el-table-column prop="subjectName" label="学科名称"></el-table-column>
      <el-table-column prop="subjectDescription" label="学科描述"></el-table-column>
      <el-table-column  prop="creatorName" label="创建人" width="120">
        <template #default="scope">

        </template>
      </el-table-column>
      <el-table-column prop="creationTime" label="创建时间"/>
      <el-table-column prop="updaterName" label="修改人" width="120"/>
      <el-table-column prop="updateTime" label="修改时间"/>
      <el-table-column label="状态" fixed="right" width="70" align="center">
        <template v-slot="scope">
          <el-switch size="small" v-model="scope.row.status" @click="updateStatus(scope.row.id, scope.row.status)" />
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作">
        <template #default="scope">
          <div style="display: flex; gap: 20px">
            <el-link type="primary" @click="showUpdate(scope.row)">修改</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        size="small"
        :background="true"
        :page-sizes="[5,10,15,20,30,50,70,100]"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--学科添加-->
  <subject-add v-model:addDialog="addDialog" @initData="initData"/>
  <!--学科修改-->
  <subject-update v-if="updateDialog" v-model:updateDialog="updateDialog" @initData="initData" v-model:rowData="rowData"/>


</template>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.table{
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 20px;
}


</style>